import React, {useEffect, useState} from "react";
import {Button, Modal, Space, Table, Tree} from "antd";
import {DeleteOutlined, ExclamationCircleOutlined, BarsOutlined } from "@ant-design/icons";
import axios from "axios";

const { confirm } = Modal;

export default function RoleList() {
    const [dataSource, setDataSource] = useState([]);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [rightList, setRightList]= useState([]);
    const [currentRights, setCurrentRights] = useState([]);
    const [currentId, setCurrentId]= useState(0);
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',  // key属性
        },
        {
            title: '角色名称',
            dataIndex: 'roleName',
            key: 'roleName'
        },
        {
            title: '操作',
            key: 'operation',
            render: (record) => {
                return (
                    <Space size="middle">
                        <Button danger shape="circle" icon={<DeleteOutlined />} onClick={()=>deleteMethod(record)} />
                        <Button type="primary" shape="circle" icon={<BarsOutlined />} onClick={()=>showModal(record)}/>
                    </Space>
                )
            },
        },
    ];

    useEffect(()=>{
        axios.get('/api/roles').then(response=>{
            // console.log(response.data);
            const data= response.data;
            setDataSource(data);
        });

        axios.get('/api/rights?_embed=children').then(response=>{
            const list= response.data;
            list.forEach(item=>{
                if(item.children.length===0) {
                    item.children= "";
                }
            });
            setRightList(list);
        });
    }, []);

    const deleteMethod= (record)=>{
        confirm({
            title: '是否想要删除此项?',
            icon: <ExclamationCircleOutlined />,
            content: '删除操作不可撤回，请谨慎操作!!!',
            onOk() {
                // console.log(record);

                setDataSource(dataSource.filter(data=>{
                    return data.id !== record.id;
                }));
                axios.delete(`/api/roles/${record.id}`).then(()=>{
                    console.log('后端删除成功')
                });
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }

    const showModal = (record) => {
        setIsModalVisible(true);
        setCurrentRights(record.rights);
        setCurrentId(record.id);
    };

    const handleOk = () => {
        setIsModalVisible(false);
        setDataSource(dataSource.map(item=>{
            if(item.id===currentId) {
                return {
                    ...item,
                    rights: currentRights.checked
                };
            }
            return item;
        }))

        // console.log(currentRights);
        axios.patch(`/api/roles/${currentId}`, {
            rights: currentRights.checked
        }).then(()=>{
            console.log('后端更新成功');
        });
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const onCheck= (checkKeys)=>{
        setCurrentRights(checkKeys);
    }

    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{ pageSize: 5 }} rowKey={ item=>item.id }/>

            <Modal title="权限分配" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Tree
                    checkStrictly={ true }
                    checkable
                    checkedKeys={ currentRights }
                    // onSelect={onSelect}
                    onCheck={onCheck}
                    treeData={rightList}
                />
            </Modal>
        </div>
    );
};
